// -------------------------- 获取分类，处理下拉框 ----------------------------
$.ajax({
    url: '/my/category/list',
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        let str = '';
        res.data.forEach(item => {
          str += `<option value="${item.id}">${item.name}</option>`;
        });
        $('select[name=cate_id]').append(str);
        // 动态创建的 下拉框、单项按钮、复选按钮，需要更新渲染
        let form = layui.form;
        // form.render('select', '表单的lay-filter属性的值');
        form.render('select');
      }
    }
  });
  
  // ----------------------------- 使用富文本编辑器 --------------------------
  // tinymce.init({
  //   selector: 'textarea',
  //   height: 400,
  //   width: 600,
  //   // 这里可以填大量的配置项
  // });
  initEditor();
  
  
  // ----------------------------- 封面图片处理 ----------------------------
  // ----------------------------- 初始化剪裁框-----------------------------------
  let image = $('#image');
  let option = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  image.cropper(option);
  
  
  // ----------------------------- 点击 上传 能够触发文件域的单击事件 ------------------
  // button:contains("标签的内容")  ---- 查找包含“内容”的标签
  $('button:contains("选择封面")').on('click', function () {
    $('#file').trigger('click');
  })
  
  // ----------------------------- 更换剪裁区的图片 -----------------------------------
  $('#file').on('change', function () {
    // console.dir(this);
    if (this.files.length > 0) {
      let fileObj = this.files[0];
      let url = URL.createObjectURL(fileObj);
      image.cropper('replace', url);
    }
  })
  
  
  
  // ---------------------------------
  // ---------- 上面是处理页面 ----------
  // ---------------------------------
  
  
  
  
  // 先抛开插件的使用，直接添加
  // 1. 自己手动修改几个分类      2. 文章封面，自己加一个文件域      3. 把各项的 name 属性修改成和接口要求的参数名一致
  $('form').on('submit', function (e) {
    e.preventDefault();
    let fd = new FormData(this);  // 收集到的数据只有 title、cate_id、state正常
    // 单独处理 content
    fd.set('content', tinyMCE.activeEditor.getContent());
  
    // 剪裁图片，把剪裁后的结果加到fd中
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
    // 通过 toBlob 方法可以把canvas转成 Blob 对象的格式
    canvas.toBlob(function (blob) {
      // 参数blob就是转换后的结果，我们把这个结果加到fd中
      fd.append('cover_img', blob);
      // 检查FormData对象中的数据，直接输入 fd 是看不到数据的，需要通过 forEach 遍历查看fd中的数据
      // fd.forEach((value, key) => {
      //   console.log(key, value);
      // });
      $.ajax({
        url: '/my/article/add',
        type: 'POST',
        data: fd,
        contentType: false,
        processData: false,
        success: function (res) {
          // console.log(res);
          if (res.status === 0) {
            layer.msg(res.message, { time: 1500 }, function () {
              // 提示1.5s后，跳转到文章列表页
              location.href = './list.html';
            })
          }
        }
      });
    });
  
  
  })